<template>
    <div>
        <MyTable :list="list">
            <template #header>
                <th>#</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>标签</th>
                <th>操作</th>
            </template>
            <template #tbody="scope">
                <td>{{ scope.row.id }}</td>
                    <td>{{ scope.row.goods_name }}</td>
                    <td>{{ scope.row.goods_price }}</td>
                    <td>
                        <input type="text" v-if="scope.row.inputVisible" v-focus @blur="scope.row.inputVisible = false" @keydown.enter="enterFn(scope.row)" v-model="scope.row.inputValue" @keydown.esc="scope.row.inputValue = '' ">
                        <button style="display:block" v-else @click="scope.row.inputVisible = true"  >+Tag</button>
                        <span v-for="(item,index) in scope.row.tags" :key="index" class="badge-warning btn btn-danger btn-sm">{{ item }}</span>
                    </td>
                    <td>
                        <button class="btn btn-danger btn-sm" @click="delFn(scope.row.id)">删除</button>
                    </td>
            </template>
        </MyTable>
    </div>
</template>

<script>
import MyTable from '@/components/MyTable.vue';

export default {
    methods:{
        delFn(id){
            let index = this.list.findIndex(obj => obj.id==id)
            this.list.splice(index,1)
        },
        enterFn(value){
            if(value.inputValue.trim().length === 0){
                alert('不能输入空')
                return
            }
            value.tags.push(value.inputValue)
        }
    },
    data(){
        return {
            list:[],
        }
    },
    components: { MyTable },
    created(){
        this.$axios({
            url:'https://www.escook.cn/api/goods'
        }).then(res => {
            this.list = res.data.data
        }).catch(err => {
            console.log(err);
        })
    },
}
</script>

<style lang="less" scoped>
    .badge-warning {
        color: #212529;
        background-color: #ffc107;
        margin-right: 5px;
    }
    </style>